<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div id="app" class="container">
      <!-- <div class="topping">
        <el-alert
          title="拼多多今天谈薪了吗？( ￣︿￣ )"
          type="error"
          :closable="false"
          effect="dark"
          center
        >
        </el-alert>
      </div> -->
      <div class="title">
        <div style="width:4.5rem;height:100%;">
          <el-avatar shape="square" :size="50" src="./icon3.jpg"></el-avatar>
        </div>
        <div style="height: 100%;">
          <div
            style="font-size: 1rem;font-weight: bold; height: 1.5rem;line-height: 1.5rem;"
          >
            我永远喜欢宫内莲华
          </div>
          <div
            style="font-size: 0.8rem;height: 1.5rem;line-height: 2rem;color:#909399;"
          >
            <span>Please leave me alone</span>
          </div>
        </div>
        <!-- <div
          style="width: 3rem; height: 3rem;margin-left: 1rem;"
        >
          <el-progress type="circle" :percentage="80" :width="50"></el-progress>
        </div> -->
      </div>
      <div style="width: 100%;">
        <el-divider content-position="center"
          >喵帕斯~</el-divider
        >
      </div>
      <div class="items">
        <div class="item" @click="gotoResume">
          <el-link :underline="false" @click="gotoResume" disabled>1.「简历」</el-link>
        </div>
        <el-divider></el-divider>
        <div class="item" @click="gotoHB">
          <el-link :underline="false" @click="gotoHB"
            >2.「Happy Birthday Util」</el-link
          >
        </div>
        <el-divider></el-divider>
        <div class="item" @click="gotoBlog(1)">
          <el-link :underline="false" @click="gotoBlog(1)"
            >3.「排序算法」</el-link
          >
        </div>
        <el-divider></el-divider>
        <div class="item" @click="gotoBlog(2)">
          <el-link :underline="false" @click="gotoBlog(2)"
            >4.「2019年11月」</el-link
          >
        </div>
        <el-divider></el-divider>
        <div class="item" @click="gotoBlog(3)">
          <el-link :underline="false" @click="gotoBlog(3)"
            >5.「2020年01月」</el-link
          >
        </div>
      </div>
    </div>
    <script
      type="text/javascript"
      src="https://s4.cnzz.com/z_stat.php?id=1278167771&web_id=1278167771"
    ></script>
  </body>
  <script src="js/vue.js"></script>
  <script src="js/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return {}
      },
      methods: {
        gotoResume() {
          // window.location.href = './resume.html'
        },
        gotoHB() {
          window.location.href = './happyBirthday.html'
        },
        format(percentage) {
          return `怒气值：${percentage}%`
        },
        gotoBlog(index) {
          window.location.href = 'blogs/blog' + index + '.html'
        }
      }
    })
  </script>
</html>
